import React, { useState, useEffect } from 'react'
import c from './index.module.scss'
import { Carousel } from 'antd';
import { Link, useNavigate } from "react-router-dom"
import axios from "axios"
export default function Home() {
  let navigate = useNavigate()
  let [res1, useres1] = useState([[], [], [], [], [], [], [], [], [], [], [], [], []])
  let [flag, setflag] = useState(false)
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios("/GetNovel")
      console.log(res.data.info);
      useres1(res.data.info)
      setflag(true)
    }
    fetchData()
  }, [])
  // console.log(res1);

  let [mobile, usemobile] = useState({
    left: "0px"
  })
  let fn = () => {
    usemobile({ left: "-316px" })
  }
  let but = () => {
    usemobile({ left: "0px" })
  }


  let [move_img, usemove] = useState({
    zIndex: 10,
    width: "150px",
    height: "200px",
    left: "78px",
    top: "28px",
    opacity: 1,
    // overflow:"hidden"

  })
  let [move_img2, usemmove2] = useState({
    zIndex: 9,
    width: "108px",
    height: "144px",
    left: "28px",
    top: "56px",
    opacity: 1,
    // overflow: "hidden"
  })
  let [move_img3, usemmove3] = useState({
    zIndex: 8,
    width: "108px",
    height: "144px",
    left: "180px",
    top: "56px",
    opacity: 1,
    // overflow: "hidden"

  })

  let [yans, useyans] = useState({
    backgroundColor: "rgba(244, 50, 78, 0.05)",
    border: "1px solid rgba(244, 50, 78, 0.2)"
  })
  let [yans1, useyans1] = useState({
    backgroundColor: " rgba(16, 101, 96, 0.05)",
    border: "1px solid rgba(16, 101, 96, 0.2)",
  })
  let [yans2, useyans2] = useState({
    backgroundColor: "rgba(20, 115, 20, 0.05)",
    border: "1px solid rgba(20, 115, 20, 0.2)",
  })
  let [yans3, useyans3] = useState({
    backgroundColor: "rgba(76, 55, 19, 0.05)",
    border: "1px solid rgba(76, 55, 19, 0.2)"
  })

  let jump = () => {
    navigate(`/xiangqing/${res1[0].bookID}`)
  }
  let jump1 = () => {
    navigate(`/xiangqing/${res1[1].bookID}`)
  }
  let jump2 = () => {
    navigate(`/xiangqing/${res1[2].bookID}`)
  }
  let jump3 = () => {
    navigate(`/xiangqing/${res1[3].bookID}`)
  }
  let jump4 = () => {
    navigate(`/xiangqing/${res1[4].bookID}`)
  }
  let jump5 = () => {
    navigate(`/xiangqing/${res1[5].bookID}`)
  }
  return (
    <div>
      <div className={c["banxin"]}>
        {/* 轮播图区域 */}
        <div className={c["home_top"]}>
          <div className={c["home_top_r"]}>
            <Carousel autoplay>
              <img src="https://open.kujiang.com/centre/core/attachment/c4776392f2dc212ee6b014d8ff86323d30f46e45.png" />
              <img src="https://open.kujiang.com/centre/core/attachment/258b4d7337a5490be522f12030f2e01ce14e8bb3.png" />
              <img src="https://open.kujiang.com/centre/core/attachment/407289deae01632be32bff8a1e7a155a05e24937.png" />
              <img src="https://open.kujiang.com/centre/core/attachment/e5fad9f1b631be87fe1fb846da520b8c1716c613.jpg" />
            </Carousel>
          </div>
          <div className={c["home_top_l"]}>
            <Link to="/welfare">
              <img src="https://s.kjcdn.com/groundwork/images/v2203/bg_welfare.png" />
            </Link>
          </div>
          <div className={c["cooperation"]}>
            <div className={c["hezuo"]}>
              <span>合作洽淡</span>
            </div>
            <div className={c["hezuo_center"]}>
              <div className={c["cooperation_item"]}>
                <span className={c["type"]}>商务及版权合作</span>
                <span className={c["contart"]}>联系人：楠楠</span>
                <span className={c["qq"]}>咨询QQ：2805352792</span>
              </div>
              <div className={c["cooperation_item"]}>
                <span className={c["type"]}>有声承制</span>
                <span className={c["contart"]}>联系人：弍辰</span>
                <span className={c["qq"]}>咨询QQ：3244905039</span>
              </div>
              <div className={c["cooperation_item"]}>
                <span className={c["type"]}>广告合作</span>
                <span className={c["contart"]}>联系人：柚子</span>
                <span className={c["qq"]}>咨询QQ：2924658639</span>
              </div>
            </div>
            <div className={c["entrance"]}>
              <div className={c["entrance_left"]}>
                <img src="https://s.kjcdn.com/groundwork/images/v2203/icon_zhinan.png" />
                <Link to="/welfare"> <span>投稿指南</span></Link>
              </div>
              <Link to="/works">
                <div className={c["entrance_left"]}>
                  <img src="https://s.kjcdn.com/groundwork/images/v2203/icon_pen.png" />
                  <span>成为作家</span>
                </div>
              </Link>
            </div>
          </div>
        </div>
        {/* 风向标 */}
        <div className={c["fangxiangbiao"]}>
          <div className={c["wind-left"]}>
            <div className={c["item-title"]}>
              <span className={c["title-text"]}>风向标</span>
            </div>
            <div className={c.dc_carousel}>
              <div className={c.dc_carousel_img}>
                <ul>
                  {/* <Carousel autoplay> */}
                  <li style={move_img}>
                    <img src="https://s.kjcdn.com/i/pubwmrs/6o/8w/7r931.jpg" alt="" />
                  </li>
                  <li style={move_img2}>
                    <img src="https://s.kjcdn.com/i/pubwmrs/6o/8w/1npq9.jpg" alt="" />
                  </li>
                  <li style={move_img3}>
                    <img src="https://s.kjcdn.com/i/pubwmrs/6o/8w/14ii5.jpg" alt="" />
                  </li>
                  {/* </Carousel> */}
                </ul>
              </div>
            </div>
            <div className={c.wind_left_info}>
              <span className={c.book_name}>龙王医婿</span>
              <span className={c.author}>轩疯狂</span>
              <span className={c.intro}>江家陷入一场阴谋中，江家被一场大火焚烧，唐楚楚冒死把江辰从大火中拉出来。

                十年后，江辰荣耀归来，报恩也报仇。

                报唐楚楚救命之恩。

                报江家灭族之仇。

                江辰出现在唐楚楚身前：从此后，有我在，你就有全世界。</span>
            </div>
            <div className={c["wind-content"]}>
              <div className={c["read-btn"]}>
                <button>立即阅读</button>
              </div>
            </div>
          </div>
          <div className={c["wind-list"]}>
            <div className={c["item-title"]}></div>
            <div className={c["list-wrapper"]}>
              <div className={c["list-item"]} onClick={jump}>
                <img src={res1[0].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[0].name1}</span>
                  <span className={c["author"]}>{res1[0].userName}</span>
                  <span className={c["intro"]}>{res1[0].introduction}</span>
                </div>
              </div>
              <div className={c["list-item"]} onClick={jump1}>
                <img src={res1[1].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[1].name1}</span>
                  <span className={c["author"]}>{res1[1].userName}</span>
                  <span className={c["intro"]}>{res1[1].introduction}</span>
                </div>
              </div>

              <div className={c["list-item"]} onClick={jump2}>
                <img src={res1[2].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[2].name1}</span>
                  <span className={c["author"]}>{res1[2].userName}</span>
                  <span className={c["intro"]}>{res1[2].introduction}</span>
                </div>
              </div>

              <div className={c["list-item"]} onClick={jump3}>
                <img src={res1[3].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[3].name1}</span>
                  <span className={c["author"]}>{res1[3].userName}</span>
                  <span className={c["intro"]}>{res1[3].introduction}</span>
                </div>
              </div>
              <div className={c["list-item"]} onClick={jump4}>
                <img src={res1[4].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[4].name1}</span>
                  <span className={c["author"]}>{res1[4].userName}</span>
                  <span className={c["intro"]}>{res1[4].introduction}</span>
                </div>
              </div>
              <div className={c["list-item"]} onClick={jump5}>
                <img src={res1[5].cover} alt="" />
                <div className={c["book-info"]}>
                  <span className={c["book-name"]}>{res1[5].name1}</span>
                  <span className={c["author"]}>{res1[5].userName}</span>
                  <span className={c["intro"]}>{res1[5].introduction}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 完结好书 */}
        <div className={c["books"]}>
          <div className={c["item-title"]}>
            <span>完结好书</span>
          </div>
          <div className={c["end-wrapper"]}>
            <Link to={`/xiangqing/${res1[6].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[6].cover} alt="" />
                <span className={c["book-name"]}>{res1[6].name2}</span>
                <span className={c["intro"]}>{res1[6].introduction}</span>
              </div>
            </Link>
            <Link to={`/xiangqing/${res1[7].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[7].cover} alt="" />
                <span className={c["book-name"]}>{res1[7].name2}</span>
                <span className={c["intro"]}>{res1[7].introduction}</span>
              </div>
            </Link>
            <Link to={`/xiangqing/${res1[8].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[8].cover} alt="" />
                <span className={c["book-name"]}>{res1[8].name2}</span>
                <span className={c["intro"]}>{res1[8].introduction}</span>
              </div>
            </Link>
            <Link to={`/xiangqing/${res1[9].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[9].cover} alt="" />
                <span className={c["book-name"]}>{res1[9].name2}</span>
                <span className={c["intro"]}>{res1[9].introduction}</span>
              </div>
            </Link>
            <Link to={`/xiangqing/${res1[10].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[10].cover} alt="" />
                <span className={c["book-name"]}>{res1[10].name2}</span>
                <span className={c["intro"]}>{res1[10].introduction}</span>
              </div>
            </Link>
            <Link to={`/xiangqing/${res1[11].bookID}`}>
              <div className={c["end-item"]}>
                <img src={res1[11].cover} alt="" />
                <span className={c["book-name"]}>{res1[11].name2}</span>
                <span className={c["intro"]}>{res1[11].introduction}</span>
              </div>
            </Link>
          </div>
        </div>
        {/* 大神介绍 */}
        <div className={c["dashen"]}>
          <div className={c["item-title"]}>
            <span className={c["title-text"]}>大神介绍</span>
          </div>
          <div className={c["zuoz"]} style={mobile}>
            <div className={c["author-item"]}>
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/oamz.png" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>新版红双喜</span>
                  <span className={c["works"]}>代表作 《万道成神》</span>
                </div>
              </div>
              <div className={c["bottom"]} style={yans}>
                酷匠网大神作家，玄幻题材超人气作家，著有《万道成神》、《紫荆令》、《武道凌天》、《一世龙皇》《异界之魔武流氓》等，吉林省作协会员。故事框架大气、宏观，思维逻辑严谨整缜密，故事情节倍感热血。
              </div>
            </div>
            <div className={c["author-item"]} >
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/1khc6.jpg" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>巅峰的神</span>
                  <span className={c["works"]}>代表作 《最狂弃少》</span>
                </div>
              </div>
              <div className={c["bottom"]} style={yans1}>
                酷匠网大神作家，内蒙古作家协会会员，内蒙古网络文艺家协会理事，著有《校园狂少》《最狂弃少》等作品。
              </div>
            </div>
            <div className={c["author-item"]}>
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/mtx3.png" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>困的睡不着</span>
                  <span className={c["works"]}>代表作 《天命赊刀人》</span>
                </div>
              </div>
              <div className={c["bottom"]} style={yans2}>
                酷匠网大神作者，都市题材人气作家，著有《天命赊刀人》《道士不好惹》等作品，吉林省作协会员，哈尔滨市作协会员。
              </div>
            </div>
            <div className={c["author-item"]}>
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/j7xo.jpg" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>刘家二少</span>
                  <span className={c["works"]}>代表作 《神级王婿》</span>
                </div>
              </div>
              <div className={c["bottom"]} style={yans3}>
                酷匠网大神作家，网络文学知名作家，代表作：《神级王婿》。擅长激烈冲突的男频都市，作品内容引人入胜，故事情节跌宕起伏，受千万读者追捧，是不可多的人气作家。
              </div>
            </div>
            <div className={c["author-item"]}>
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/31pdf.jpg" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>轩疯狂</span>
                  <span className={c["works"]}>代表作 《龙王医婿》</span>
                </div>
              </div>
              <div className={c["bottom"]}>
                累计创作十余本，总字数三千万，本本精品，业内顶级大神。代表作:龙王医婿。荣获酷匠2021逐鹿巅峰总决赛冠军。
              </div>
            </div>
            <div className={c["author-item"]}>
              <div className={c["top"]}>
                <img src="https://s.kjcdn.com/i/pubrs/8c/8c/3dw0w.jpg" alt="" />
                <div className={c["right"]}>
                  <span className={c["author-name"]}>疯狂小牛</span>
                  <span className={c["works"]}>代表作 《天龙殿》</span>
                </div>
              </div>
              <div className={c["bottom"]}>
                酷匠网大神作家，湖南省网络作协成员。代表作：《天龙殿》、《都市逍遥医圣》。擅长将读者代入到故事内的世界中去，调动读者的情绪，在网文都市类作家中，占有重要的一席之地
              </div>
            </div>
          </div>
          <div className={c["left-btn"]} onClick={but}>
            <img src="https://s.kjcdn.com/groundwork/images/test/icon_left.png" alt="" />
          </div>
          <div className={c["right-btn"]} onClick={fn}>
            <img src="https://s.kjcdn.com/groundwork/images/test/icon_right.png" alt="" />
          </div>
        </div>
      </div>
    </div >
  )
}
